<template>
    <view>
        <van-cell title="展示弹出层" is-link @click="showPopup" :value="(startTime ? startTime : '请选择') + ' - ' + (radio === '1' ? '' : '(次日)') + (endTime ? endTime : '')" />
        <van-popup v-model="show" position="bottom" custom-style="height: 55%;" @close="onClose">
            <div v-if="chooseStart">
                <text class="startTitle">选择开始时间</text>
                <van-datetime-picker
                    id="startTimePicker"
                    type="time"
                    v-model="currentDate"
                    @input="onInput($event, { tagId: 'startTimePicker' })"
                    @confirm="startTimeConfirm($event, { tagId: 'startTimePicker' })"
                />
            </div>
            <div v-else>
                <text class="startTitle">选择结束时间</text>
                <radio-group @change="onChange" class="myRadioGroup">
                    <label class="radio">
                        <radio value="1" :checked="radio === '1'" />
                        今日
                    </label>
                    <label class="radio">
                        <radio value="2" :checked="radio === '2'" />
                        次日
                    </label>
                </radio-group>
                <van-datetime-picker type="time" v-model="currentDate" :min-hour="minHour" :min-minute="minMinute" @input="onInput" @confirm="endTimeConfirm" />
            </div>
        </van-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            chooseStart: true,
            //表示在选择开始时间还是结束时间true是开始时间
            currentDate: '12:00',
            minHour: 0,
            minMinute: 0,
            radio: '1',
            startTime: null,
            endTime: null
        };
    },
    methods: {
        showPopup() {
            this.setData({
                show: true
            });
        },

        onClose() {
            this.setData({
                show: false
            });
        },

        // onInput(event) {
        //   this.setData({
        //     currentDate: event.detail
        //   });
        // },
        // 点击选择开始时间的确定按钮
        startTimeConfirm(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            let minHour = 0;
            let minMinute = 0;

            if (this.radio === '1') {
                minHour = +e.detail.split(':')[0];
                minMinute = +e.detail.split(':')[1] + 1;
            }

            this.setData({
                chooseStart: false,
                show: true,
                startTime: e.detail,
                minHour,
                minMinute
            });
        },

        endTimeConfirm(e) {
            this.setData({
                chooseStart: true,
                show: false,
                endTime: e.detail
            });
        },

        onChange(event) {
            const radio = event.detail.value;
            let minHour = 0;
            let minMinute = 0;

            if (radio === '1') {
                minHour = +this.startTime.split(':')[0];
                minMinute = +this.startTime.split(':')[1] + 1;
            }

            this.setData({
                radio,
                minHour,
                minMinute
            });
        },

        onInput(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            if (!this.startTime) {
                this.setData({
                    currentDate: e.detail
                });
                return;
            }

            if (this.radio === '1' && +e.detail.split(':')[0] === +this.startTime.split(':')[0]) {
                this.setData({
                    minMinute: +this.startTime.split(':')[1] + 1,
                    currentDate: e.detail
                });
            } else {
                this.setData({
                    minMinute: 0,
                    currentDate: e.detail
                });
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
